<template>
  <div class="external">
    <n-space>
      <n-button type="primary" @click="show = true">打开终端</n-button>
      <n-button type="info" @click="returns">
        <template #icon>
          <n-icon>
            <ReturnUpBackOutline/>
          </n-icon>
        </template>
        返回
      </n-button>
    </n-space>
    <n-space>
      <Xterm ref="xterm_ref"/>
    </n-space>
  </div>
  <n-modal v-model:show="show" :mask-closable="false">
    <n-card style="width: 600px;" title="终端信息" :hoverable="true" :embedded="true" size="huge">
      <n-form :model="modelRef" ref="formRef" :rules="rules">
        <n-form-item path="host" label="互连协议">
          <n-input
              v-model:value="modelRef.host"
              @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item path="port" label="端口">
          <n-input
              v-model:value="modelRef.port"
              @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item label="用户" path="user">
          <n-input
              v-model:value="modelRef.user"
              @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item label="密码" path="secret">
          <n-input
              type="password"
              v-model:value="modelRef.secret"
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" @click="connect">连接</n-button>
          <n-button type="warning" @click="show = false">关闭</n-button>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>
<script>
import {useRouter} from 'vue-router'
import {defineComponent, ref} from 'vue'
import Xterm from '@/views/xterm/xterm.vue'
import {ReturnUpBackOutline} from '@vicons/ionicons5'
import {NButton, NCard, NForm, NFormItem, NIcon, NInput, NModal, NSpace, useMessage} from 'naive-ui'

export default defineComponent({
  name: 'Index_Xterm',
  components: {
    NForm,
    NIcon,
    NCard,
    Xterm,
    NModal,
    NSpace,
    NInput,
    NButton,
    NFormItem,
    ReturnUpBackOutline
  },
  setup: function () {
    let xterm_ref = ref(null)
    const modelRef = ref({
      host: '192.168.8.120',
      port: '22',
      user: 'root',
      secret: 'root!@#123'
    }), formRef = ref()
        , rules = {
      host: [{
        required: true,
        message: '请输入登录设备的ip地址',
        trigger: ['input', 'blur']
      }],
      port: [{
        required: true,
        message: '请输入登录设备的端口',
        trigger: ['input', 'blur']
      }],
      user: [{
        required: true,
        message: '请输入登录设备的用户',
        trigger: ['input', 'blur']
      }],
      secret: [{
        required: true,
        message: '请输入登录设备的密码',
        trigger: ['input', 'blur']
      }]
    }
    const show = ref(false)
        , router = useRouter(), message = useMessage()
        , returns = () => router.push({path: '/'})
        , connect = (e) => {
      e.preventDefault()
      formRef.value.validate((errors) => {
        if (!errors) {
          show.value = false
          xterm_ref.value.initXterm(modelRef.value)
        } else {
          console.log(errors)
          message.error('终端信息填写不正确！！')
        }
      })
    }
    return {
      show,
      rules,
      xterm_ref,
      formRef,
      returns,
      connect,
      modelRef
    }
  }
})
</script>

<style lang="scss" scoped>
.external {
  margin: 20px;
  display: flex;
  flex-flow: column;
  text-align: center;
  align-items: center;
  justify-content: center;

  .n-space:nth-child(2) {
    padding: 20px;
  }
}

.n-card-header__main {
  cursor: default;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.n-scrollbar-content {
  bottom: 20%;
}
</style>
